<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱的告白</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* CSS 变量 */
        :root {
            --primary-gradient-start: #f6d365;
            --primary-gradient-end: #fda085;
            --success-color: #38a169;
            --danger-color: #e53e3e;
            --text-color: #2d3748;
            --modal-bg: rgba(0, 0, 0, 0.5);
            --container-bg: rgba(255, 255, 255, 0.9);
            --animation-duration: 0.3s;
        }

        body {
            background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }

        /* 公共动画样式 */
        @keyframes slideUpFade {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideDownFade {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }

        @keyframes rotateAndScale {
            0% {
                transform: scale(1) rotate(0deg);
            }
            50% {
                transform: scale(1.1) rotate(5deg);
            }
            100% {
                transform: scale(1.05) rotate(0deg);
            }
        }

        /* 使用公共动画样式 */
        .animate-slideUpFade {
            animation: slideUpFade var(--animation-duration) ease-out;
        }

        .animate-slideDownFade {
            animation: slideDownFade var(--animation-duration) ease-out;
        }

        /* 容器动画使用公共样式 */
        .confession-container {
            background-color: var(--container-bg);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            animation: slideUpFade 0.8s ease-out;
            max-width: 90%;
            margin: 0 auto;
        }

        h1 {
            font-size: clamp(2rem, 6vw, 3rem);
            font-weight: 800;
            color: var(--danger-color);
            text-align: center;
            margin-bottom: 2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            letter-spacing: 2px;
        }

        p {
            font-size: clamp(1.1rem, 3.5vw, 1.3rem);
            line-height: 1.8;
            color: var(--text-color);
            margin-bottom: 2.5rem;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            word-spacing: 3px;
        }

        p strong {
            color: var(--danger-color);
            font-weight: 700;
        }

        p em {
            font-style: italic;
            color: #7f4dff;
        }

        .button-container {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        button {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--animation-duration) ease;
        }

        button.yes {
            background-color: var(--success-color);
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        button.yes:hover {
            background-color: #2f855a;
            animation: rotateAndScale var(--animation-duration) ease;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        button.no {
            background-color: rgba(229, 62, 62, 0.5);
            color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            cursor: not-allowed;
        }

        button.no:hover {
            background-color: rgba(197, 48, 48, 0.5);
            color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            animation: none;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--modal-bg);
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        /* 响应式设计 */
        @media (max-width: 640px) {
            .confession-container {
                padding: 1.5rem;
            }
        }
    </style>
</head>

<body class="min-h-screen flex items-center justify-center">
<div class="confession-container bg-white/90 p-8 rounded-2xl shadow-md animate-slideUpFade">
    <h1 class="text-4xl font-bold text-red-600 text-center mb-6">亲爱的 <span id="name"> [对方名字]</span></h1>
    <p class="text-lg text-gray-700 text-center mb-8">在时光的悠悠长河中，我如一位孤独的旅人，怀揣着对真爱的憧憬，在茫茫人海里寻觅那与我灵魂相契的身影。直到命运的齿轮悄然转动，你宛如一颗璀璨星辰，照亮了我黯淡的宇宙。<br><br>你的笑容，恰似春日里最温暖的那缕阳光，轻柔地洒落在我心田的每一个角落，让荒芜的土地绽放出 <strong>爱的花朵</strong>；你的温柔，犹如山间潺潺流淌的溪流，以细腻的姿态润泽着我干涸已久的灵魂，让我在疲惫的生活中找到了栖息的港湾。<br><br>与你相伴的每一分每一秒，都如同珍贵的珍珠，被我小心翼翼地收藏在记忆的宝盒里。每一次目光的交汇，每一句轻声的交谈，都让我深深沉醉在这份美好的情感之中。<br><br>我想告诉你，从我遇见你的那一刻起，一种名为“喜欢”的情愫便在我心底生根发芽，它带着无尽的温柔与眷恋，在时光的滋养下茁壮成长。这份喜欢，没有丝毫的杂质，纯粹而又深沉，如同夜空中最亮的星，指引着我走向你。<br><br>我渴望成为你生命中的专属伴侣，在未来的日子里，与你携手漫步在岁月的小径上。春天，我们一起去看 <em>繁花似锦</em>，感受微风拂面的温柔；夏天，我们在海边聆听海浪的歌唱，让清凉的海水带走所有的烦恼；秋天，我们漫步在金黄的落叶中，分享着生活的点点滴滴；冬天，我们依偎在温暖的炉火旁，相互诉说着彼此的梦想和期许。<br><br>你愿意牵起我的手，与我一同书写属于我们的浪漫篇章吗？</p>
    <div class="flex justify-center gap-4">
        <button class="yes bg-green-500 text-white py-3 px-6 rounded-md font-semibold hover:bg-green-600 transition-colors" onclick="showModal('yes')">愿意</button>
        <button class="no bg-red-500 text-white py-3 px-6 rounded-md font-semibold hover:bg-red-600 transition-colors" disabled>不愿意</button>
    </div>
</div>
<div id="yes-modal" class="modal hidden fixed top-0 left-0 w-full h-full bg-black/50 flex items-center justify-center z-1000">
    <div class="modal-content bg-white p-8 rounded-2xl shadow-md animate-slideUpFade">
        <p class="text-2xl text-green-600 font-bold text-center">太开心啦，我会一辈子好好爱你！</p>
    </div>
</div>
<div id="no-modal" class="modal hidden fixed top-0 left-0 w-full h-full bg-black/50 flex items-center justify-center z-1000">
    <div class="modal-content bg-white p-8 rounded-2xl shadow-md animate-slideUpFade">
        <p class="text-2xl text-red-600 font-bold text-center">没关系，我会默默守护你，等你回心转意。</p>
    </div>
</div>
<script>
    const name = prompt('请输入对方的名字：');
    if (name) {
        document.getElementById('name').textContent = name;
    }

    function showModal(answer) {
        const modalId = answer === 'yes' ? 'yes-modal' : 'no-modal';
        const modal = document.getElementById(modalId);
        modal.classList.remove('hidden');
        modal.classList.remove('animate-slideDownFade');
        modal.classList.add('animate-slideUpFade');
        setTimeout(() => {
            modal.classList.remove('animate-slideUpFade');
            modal.classList.add('animate-slideDownFade');
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }, 3000);
    }
</script>
</body>

</html>